import React, { Component } from 'react';
import '../scss/Login.scss';
import { Toast } from 'antd-mobile'
import { user_register } from "../tools/api";
import { user_login } from "../tools/api";
import { EyeInvisibleTwoTone, EyeTwoTone } from '@ant-design/icons';

class Login extends Component {
    state = {
        username:'',
        password:'',
        isHot:false,
    }
    render() {
        return (
            <div className='login'>
                <div className="max">
                    <div className="form">
                        <div className="top">
                            <h1>WelCome</h1>
                        </div>
                        <div className="main">
                            <div className="input">
                                <div className="inp">
                                <i className='ab'><EyeTwoTone /></i>  &nbsp; <input type="text" onChange={ this.username } value={ this.state.username }  placeholder='Please enter the username'/>
                                </div>
                                <div className="inp">
                                <i className='ab'><EyeInvisibleTwoTone /></i>  &nbsp;<input type="password" onChange={ this.password } value={ this.state.password } placeholder='Please enter your password' />
                                </div>
                            </div>
                        </div>
                        <div className="bottom">
                            <div className='btn'>
                                <button onClick={ this.login }>login</button>
                            </div>
                            <div className='btnTwo'>
                                <button onClick={ this.register }>register</button>
                            </div>
                        </div>
                        <div className="inhot">
                            <input type="checkbox" value={ this.state.isHot } onChange={ this.negation } />
                            <span>Please read the regulations carefully</span>
                        </div>
                    </div>
                </div>
            </div>
        );
    }

    username = (event) => { this.setState({ username:event.target.value } ) }

    password = (event) => { this.setState({ password:event.target.value } ) }

    negation = () => { this.setState({ isHot:!this.state.isHot }, () => { console.log(this.state); }) }

    // 注册验证
    register = () => {
        if( /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/.test(this.state.username) == false ) {
            alert('请输入正确的手机格式')
        } else if (this.state.password != '' && this.state.isHot == true) {
            user_register({ phone:this.state.username,pass:this.state.password }).then(
                response => {
                    if( response.data.code == 200 ) { 
                        Toast.show({ icon:'success',content:'注册成功!' })
                    } else { Toast.show({ icon:'fail',content:'注册失败，账号已存在!' })} })} else {Toast.show({ icon:'fail',content:'请先勾选协议!' })}}

    // 登录验证
    login = () => {
        if( /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/.test(this.state.username) == false ) {
            alert('请输入正确的手机格式')
        } else if (this.state.password != '' && this.state.isHot == true) {
            user_login({ phone:this.state.username,pass:this.state.password }).then(
                response => { 
                    // console.log(response.data);
                    if( response.data.code == 200 ) {
                        Toast.show({ icon:'success',content:'登陆成功!' })
                        console.log(response.data);
                        this.props.history.push({ pathname:'/index' });
                        localStorage.setItem('token',response.data.token)   //* 存储用户信息到浏览器本地存储
                        localStorage.setItem('userinfo',JSON.stringify(response.data.userinfo))   //* 存储用户信息到浏览器本地存储
                    } else {
                        Toast.show({ icon:'fail',content:'登陆失败!' })
                    }
                }
            )
        } else { Toast.show({ icon:'fail',content:'请先勾选协议!' }) }
    }


    // componentDidMount() {
        // 我的收藏列表
    //     const data = JSON.stringify(localStorage.getItem('userinfo')).id
    //     good_favlist( { userid : data  } ).then(
    //         response => { 
    //             console.log(response.data.list);
    //             store.dispatch( { type:'ADD',params:response.data.list } )                
    //         }
    //     )
    // }
}

export default Login;